import React, { useState } from 'react';
import './CanvasComponent.module.css';

function App() {
    // 定义一个状态变量 scale，用于控制 div 的缩放比例
    const [scale, setScale] = useState(1);

    // 处理鼠标滚轮滚动事件
    const handleWheel = (e) => {
        e.preventDefault();
        const delta = e.deltaY;
        // 根据滚动方向调整缩放比例
        if (delta < 0) {
            // 向上滚动，放大
            setScale(prevScale => Math.min(prevScale + 0.1, 5)); // 最大缩放比例为 2
        } else {
            // 向下滚动，缩小
            setScale(prevScale => Math.max(prevScale - 0.1, 0.5)); // 最小缩放比例为 0.5
        }
    };

    return (
        <div className="App">
            {/* 带有缩放效果的 div 盒子，监听鼠标滚轮事件 */}
            <div
                className="box"
                style={{
                    width: '100px',
                    height: '100px',
                    backgroundColor: '#0ff',
                    marginTop: '200px',
                    transform: `scale(${scale})`
                }}
                onWheel={handleWheel}
            >
                盒子
            </div>
        </div>
    );
}

export default App;